<!--
 * @Author: f
 * @Date: 2022-04-07 18:37:48
 * @Description: file content
 * @LastEditors: Chenx
 * @LastEditTime: 2023-03-20 16:20:37
-->
<template>
  <i class="s-icon">
    <img :src="geturl" alt="" :style="styleObject" />
  </i>
</template>

<script setup lang="ts">

interface iconstyle {
  width: string
  height: string
}

const props = withDefaults(
  defineProps<{
    name: string
    size?: string | number
  }>(),
  {
    name: '',
    size: 20
  }
)

const geturl = computed(() => {
  if (!props.name) return ''
  else if (props.name.includes('/') || props.name.includes('base64')) {
    return props.name
  } else if (props.name.includes('svg')) {
    return getAssetsFile(`icons/svg/${props.name}`)
  }
  return getAssetsFile(`icons/png/${props.name}.png`)
})

const styleObject = computed(() => {
  return {
    width: typeof props.size === 'string' ? props.size : pxToRem(props.size as number),
    height: typeof props.size === 'string' ? props.size : pxToRem(props.size as number)
  }
})
</script>

<style lang="scss" scoped>
.s-icon {
  display: inline-block;
  line-height: 1;
  overflow: hidden;
  img {
    float: left;
  }
}
</style>
